{% stylesheet %}
  .block_video .video_empty {
    background-color: #eef0f5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
  }

  .block_video iframe {
    width: 100%;
  }
  .block_video .iframebox {
    width: 100%;
  }

  .block_video .block_video_content_format_1 {
    display: flex;
    align-items: center;
  }

  .block_video .block_video_content_format_1 .block_title {
    width: 50%;
    text-align: left;
    margin: 0;
    padding-right: 10%;
    box-sizing: border-box;
  }

  .block_video .block_video_content_format_2 .block_title {
    width: 50%;
    text-align: left;
    margin: 0;
    padding-left: 10%;
    box-sizing: border-box;
  }

  .block_video .block_video_content_format_1 iframe,
  .block_video .block_video_content_format_1 .video_empty,
  .block_video .block_video_content_format_2 iframe,
  .block_video .block_video_content_format_2 .video_empty {
    width: 50%;
  }

  .block_video .block_video_content_format_1 iframe {
    width: 50%;
  }

  .block_video .block_video_content_format_2 {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .block_video .custom_video {
    width: 100%;
  }

  @media (max-width: 767px) {
    .block_video .block_video_content_format_2,
    .block_video .block_video_content_format_1 {
      display: block;
    }
    .block_video .block_video_content_format_2 .block_title {
      margin: 0;
      width: 100%;
      text-align: center;
      padding: 0;
      margin-bottom: calc(var(--general_layout_spacing) * 0.5);
    }
    .block_video .block_video_content_format_1 .block_title {
      width: 100%;
      text-align: center;
      padding: 0;
      margin-bottom: calc(var(--general_layout_spacing) * 0.5);
    }
    .block_video .block_video_content_format_1 iframe {
      width: 100%;
    }
    .block_video .block_video_content_format_1 .video_empty {
      width: 100%;
    }
    .block_video .block_video_content iframe {
      width: 100%;
    }
    .block_video .block_video_content .video_empty {
      width: 100%;
    }
  }
{% endstylesheet %}

{% assign blockId = block_id | default: section.block_id %}

<div class="block_video" id="block_video_{{ blockId }}">
  <div class="container_wrapper">
    <div class="block_video_content block_video_content_{{ section.settings.format }} block_video_content_{{ section.settings.proportion }}">
      {% include 'block_title', title: section.settings.title, detail: section.settings.detail %}

      {% if section.settings.custom_video.video_src == "" %}
        {% if section.settings.video_url.model != '' %}
          <div id="iframe_{{blockId}}" class="iframebox"></div>
        {% else %}
          <div class="video_empty">
            {% include 'icon_video' ,{width:'100',height:'100'} %}
          </div>
        {% endif %}
      {% else %}
      <video class="custom_video" controls {% if section.settings.is_autoplay %}autoplay{% endif %}  {% if section.settings.is_loop_play %}loop{% endif %} src="{{ section.settings.custom_video.video_src }}" />
      {% endif %}

      
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    var _width = $('#block_video_{{ blockId }} #iframe_{{blockId}}').width();
  	{% if section.settings.proportion == "proportion_1" %}
  	var _height = parseInt(_width) * 9 / 16;
  	{% else %}
  	var _height = parseInt(_width) * 3 / 4;
  	{% endif %}
  	$('.video_empty').css('height',_height);
    $('#block_video_{{ blockId }} .custom_video').css('height',_height);
    


    {% if section.settings.video_url.id and section.settings.custom_video.video_src == "" %}
      moi.youtubeVideoPlay('iframe_{{ blockId }}', {
        height: _height,
        width: _width,
        videoId: "{{section.settings.video_url.id}}",
        playerVars: {
          mute: 0,
          controls: 1
        },
        events: {
          onReady: function (event) {
            {% if section.settings.is_autoplay %}
              event.target.playVideo();
            {% endif %}
          },
          onStateChange: function (event) {
            {% if section.settings.is_loop_play %}
              if (event.data === 0) {
                event.target.playVideo();
              }
            {% endif %}
          }
        }
      });
    {% endif %}
  })
</script>

{% schema %}
{
  "tag": "",
  "class": "block_video",
  "name": {
    "zh_CN": "视频",
    "en_US": "Video"
  },
  "max_blocks": "0",
  "is_global": false,
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "id": "detail"
    },
    {
      "type": "card_select",
      "id": "format",
      "option": [
        {
          "label": {
            "zh_CN": "视频居右",
            "en_US": "Video on the right"
          },
          "value": "format_1"
        },
        {
          "label": {
            "zh_CN": "视频居左",
            "en_US": "Video on the left"
          },
          "value": "format_2"
        },
        {
          "label": {
            "zh_CN": "视频居下",
            "en_US": "Video down"
          },
          "value": "format_3"
        }
      ],
      "label": {
        "zh_CN": "PC版式方式",
        "en_US": "PC Format Mode"
      }
    },
    {
      "type": "card_select",
      "id": "proportion",
      "option": [
        {
          "label": {
            "zh_CN": "16:9",
            "en_US": "Next"
          },
          "value": "proportion_1"
        },
        {
          "label": {
            "zh_CN": "4:3",
            "en_US": "And"
          },
          "value": "proportion_2"
        }
      ],
      "label": {
        "zh_CN": "视频比例",
        "en_US": "Video ratio"
      }
    },
	{
		"type": "card_image",
		"label": {
		  "zh_CN": "本地视频",
		  "en_US": "Local video"
		},
		"default": {
		  "src": "",
		  "alt": "",
		  "video_src": ""
		},
		"info": {
		  "zh_CN": ""
		},
		"card_type": "video",
		"id": "custom_video"
	},
    {
      "type": "card_video",
      "error": {
        "zh_CN": "输入地址错误",
        "en_US": "Wrong address entered"
      },
      "rule": ["youtube"],
      "label": {
        "zh_CN": "视频链接",
        "en_US": "Video link"
      },
      "placeholder": {
        "zh_CN": "请输入Youtube视频的URL",
        "en_US": "Please enter the URL of the Youtube video"
      },
      "info": {
        "zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX",
        "en_US": "Only support Youtube, please enter the complete links such as: https://www.youtube.com/watch?v=XXXXXX"
      },
      "id": "video_url"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "自动播放",
        "en_US": "Autoplay"
      },
      "default": false,
      "id": "is_autoplay"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "循环播放",
        "en_US": "Loop play"
      },
      "default": false,
      "id": "is_loop_play"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "custom_video": {
        "src": "",
        "alt": "",
        "video_src": ""
      },
      "format": "format_3",
      "proportion": "proportion_1",
      "video_url": {
        "value": "",
        "id": "",
        "model": ""
      },
      "is_autoplay": false,
      "is_loop_play": false,
      "title": "Video",
      "detail": "Use this text to share information about your brand with your customers. Describe a product,share announcements,<br/>or welcome customers to your store."
    },
    "blocks": []
  },
  "icon": "icon-shipin"
}
{% endschema %}
